Skip to content

[#304] Floating bottom bar for Trade/Donate/Rate on mobile#307

Merged
realproject7 merged 1 commit intomainfrom
task/304-mobile-bottom-bar
Mar 18, 2026
Merged

[#304] Floating bottom bar for Trade/Donate/Rate on mobile#307
realproject7 merged 1 commit intomainfrom
task/304-mobile-bottom-bar

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • New MobileActionBar client component: fixed bottom bar (hidden on lg:) with Trade, Donate, Rate buttons
  • Tapping a button opens a bottom sheet overlay with the corresponding widget (Trade includes PriceChart + TradingWidget)
  • Sidebar now hidden lg:block — story content is the primary view on mobile
  • Share to Farcaster shown inline on mobile (below story content), kept in sidebar on desktop
  • Bottom padding (pb-24 lg:pb-10) prevents footer from being hidden behind the bar
  • Buttons that don't apply (Trade/Rate when no token) are automatically excluded

Fixes #304

Test plan

  • Mobile: no sidebar widgets above story content
  • Mobile: floating bottom bar visible with Trade/Donate/Rate buttons
  • Tapping each button opens bottom sheet with correct widget
  • Backdrop click closes the sheet
  • Footer visible (not hidden behind bar)
  • Desktop (lg:): sidebar layout unchanged
  • Share to Farcaster accessible on both mobile and desktop
  • Stories without token_address: only Donate button shows

🤖 Generated with Claude Code

- New MobileActionBar component: fixed bottom bar with bottom sheet
- Sidebar hidden on mobile (lg:block), story content is primary
- Tapping Trade/Donate/Rate opens corresponding widget in slide-up
- Share to Farcaster moved inline on mobile, kept in sidebar on desktop
- Bottom padding (pb-24) prevents footer from hiding behind bar

Fixes #304

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Solid implementation. Good separation — server page passes widget content as props, MobileActionBar handles client-side state/interaction. z-index stacking is correct (30/40/50), backdrop dismiss works, max-height + overflow prevents sheet from covering entire screen. Bottom padding accounts for the fixed bar. ShareToFarcaster correctly duplicated inline on mobile.

Minor nit (non-blocking): grid-cols-3 stays even when trade/rate buttons are filtered out (no token_address), so 1-2 buttons could look sparse. Could use grid-cols-${buttons.length} or just flex gap-2 instead, but not worth blocking on.

LGTM.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The PR matches issue #304 and cleanly restructures the mobile story detail page so story content is primary while desktop keeps the existing sidebar model.

Findings

  • No blocking findings.

Decision

Approving because the mobile page no longer renders the widget stack above the story, the fixed bottom bar opens the requested Trade/Donate/Rate panels, Share to Farcaster remains reachable, and the desktop sidebar layout stays in place behind lg: classes.

@realproject7 realproject7 merged commit 02d66f6 into main Mar 18, 2026
1 check passed
realproject7 added a commit that referenced this pull request Mar 27, 2026
Add onNavigate callback prop to ConnectWallet, called on profile link
click. NavBar passes setMobileOpen(false) from the mobile dropdown.
Desktop behavior unaffected (onNavigate is optional/undefined).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[mobile] Floating bottom bar for Trade/Donate/Ratings on story detail page

2 participants